<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            border: none;
        }

        .mapcontain {
            width: 100%;
            height: 100%;
            border: none;
        }

        #allmap {
            height: 100%;
            width: 100%;
            border: none;
        }

        #result {
            position: fixed;
            top: 10px;
            left: 20px;
            width: 300px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: #fff;
            /* box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5); */
            border-radius: 7px;
            z-index: 99;
        }
    </style>
    <script type="text/javascript"
        src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=25F52aGMMdboa3UB2GIhpPbtrNxA7S2I"></script>
</head>

<body style="margin: none">
    <div class="mapcontain">
        <div id="allmap"></div>
    </div>

</body>

</html>
<script type="text/javascript">
    setTimeout(function () {
        var map = new BMapGL.Map('allmap');
        var point = new BMapGL.Point(116.51397, 39.73517);
        map.centerAndZoom(point, 11);
        map.enableScrollWheelZoom(true);

        var driving = new BMapGL.DrivingRouteLine(map, {
            renderOptions: {
                map: map,
                autoViewport: true,
                enableDragging: true,
            }
        })

        var start = new BMapGL.Point(116.236532, 39.904113661);
        var start2 = new BMapGL.Point(116.310791, 40.003419);
        var end = new BMapGL.Point(116.545486, 40.006040);
        var end2 = new BMapGL.Point(116.486419, 39.877282);
        var way2 = new BMapGL.Point(116.36315661025989, 39.904113661);
        var way1 = new BMapGL.Point(116.49257333444989, 39.87920464090217);
        var way = '39.87920464090217,116.49257333444989|39.87806279099342,116.49218746174857'
        driving.search(start, end, {
            waypoints: [way2]
        });
    }, 1000*3)
</script>